<template>
  <div class="echarts_3_container">
    <div id="echarts_3"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const showProportion = () => {
  var charDom = document.getElementById('echarts_3')
  var myChart = echarts.init(charDom)
  var option = {
    title: {
      text: '工时占比',
      padding: [15, 0, 0, 20], // 标题位置
      textStyle: {
        fontSize: 15,
        color: '#2B3674'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}:{c}%'
    },
    legend: {
      icon: 'circle',
      itemHeight: 7, //修改icon图形大小
      x: 'center',
      y: 'bottom',
      padding: [20, 10],
      // borderWidth: 1,
      borderColor: '#f0f4f6',
      borderRadius: 10,
      shadowColor: '#b1bcc2',
      shadowBlur: 9,
      shadowOffsetX: 0,
      shadowOffsetY: 0
    },
    series: [
      {
        type: 'pie',
        radius: '53%', // 设置饼图大小
        data: [
          {
            value: 33,
            name: '合同',
            itemStyle: { color: '#2acd72' }
          },
          {
            value: 44,
            name: '运维',
            itemStyle: { color: '#6ad2ff' }
          },
          {
            value: 55,
            name: '自研',
            itemStyle: { color: '#eff4fb' }
          },
          {
            value: 66,
            name: '预研',
            itemStyle: { color: '#9260fe' }
          },
          {
            value: 45,
            name: '其他',
            itemStyle: { color: '#4318ff' }
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 去除饼图的引导线
        label: {
          normal: {
            show: false
          }
        }
      }
    ]
  }
  myChart.setOption(option)
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

onMounted(() => {
  showProportion()
})
</script>
<style lang="less">
.echarts_3_container {
  #echarts_3 {
    width: 600px;
    height: 400px;
  }
}
</style>
